<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2021/4/2
  Time: 9:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<% request.setCharacterEncoding("utf-8");
    session.getAttribute("userName");
%>
<html>
<head>
    <title>Title</title>
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>

    <%--    <script language="javascript" type="text/javascript" src="${pageContext.request.contextPath}/My97DatePicker/skin/WdatePicker.js"></script>--%>
</head>
<body onload="loadData()">
<h1 align=center>注册客户</h1>
<hr/>
<form class="form-horizontal">

    <div class="form-group" align="left">
        <label class="col-md-2"></label>
        <div class="col-md-2" >
            <input type="text" id="userId1" placeholder="请输入用户Id" class="form-control">
        </div>
        <div class="col-md-2" >
            <input type="text" id="userName" placeholder="请输入用户姓名" class="form-control">
        </div>
        <input type="button" class="btn btn-success btn-sm" onclick="loadData()" value="查询">
        <input type="button" class="btn btn-success btn-sm" onclick="loadData()" value="销售量">
        <span style="font-family: 宋体;size: 1px">当前共有<span style="color: red">${number}</span>人注册
        <%--        后端传向前端用http，ses${userNumber}sion--%>
<%--        <span style="font-family: 宋体;size: 1px">当前共有<span style="color: red">${countAll}</span>条数据</span>--%>
<%--        <span style="font-family: 宋体;size: 1px">已处理<span style="color: red">${countLots}</span>条数据</span>--%>

<%--        <select id="reviewState" name="reviewState" class="selected-inline" onchange="loadData()">--%>
<%--            <option value="4" class="selected-inline selected">全部订单</option>--%>
<%--            <option value="1"  >待审核</option>--%>
<%--            <option value="2" >通过审核订单</option>--%>
<%--            <option value="3" >驳回审核订单</option>--%>

<%--        </select>--%>
        <script>
            form.projectPorperty.value = '${user.projectPorperty}';
        </script>
    </div>
</form>
<%--<input type="button" class="btn btn-success btn-sm" onclick="bitDelte()" value="批量删除">--%>
<table class="table">
    <thead>
    <th><input type="checkbox" name="selectId" onclick="quanxuan(this)">全选</th>
<%--    <th onclick="orderBy(this,'sys_id')">桌子序号<span>↑</span></th>--%>
    <th onclick="orderBy(this,'sys_id')">用户Id<span>↑↑</span></th>
    <th>用户姓名</th>
    <th>用户角色</th>
    <th>用户注册时间</th>
    <th>用户销售额</th>
    </thead>
    <tbody id="tb">
    </tbody>
</table>

<div>
    <button type="button" class="btn btn-success btn-sm" onclick="pres()">上一页</button>
    <button type="button" class="btn btn-success btn-sm" onclick="nexts()">下一页</button>
    一共有<span id="total"></span>数据，共有<span id="totalPage"></span>页
</div>

<%--模态框--%>
<div class="modal fade" id="one" style="top:200px">
    <div class="modal-dialog">
        <div class="modal-content">
            <!--头部-->
            <div class="modal-header" style="background-color: green; height: 20px;">
            </div>
            <div class="modal-body">
                <table class="table" border="0">
                    <tr>
                        <%--                        四列--%>
                        <th>
                            桌位号
                        </th>
                        <th>
                            用户Id
                        </th>
                    </tr>
                    <tr><td><input  id="tId" readonly="true"></td>
                        <td>
                            <input type="text" id="userId" >
                        </td>
                    </tr>
                    <tr>
                        <th>用户数量</th>
                        <th>可坐人数</th>
                    </tr>
                    <tr>
                        <td>
                            <%--                            value="${userName}"--%>
                            <input  type="text"  id="userNumber" readonly="true" >
                        </td>
                        <td>

                            <input type="text" value="${usernumber}" >
                        </td>
                    </tr>
                    <tr>
                        <td>起止时间：</td>
                        <td>
                            <%--                           获取值用${#id}.val()--%>
                            <input type="text" placeholder="请选择开始时间" id="tTime">
                            <input type="text" placeholder="请选择结束时间" id="tArrtime">
                        </td>
                    </tr>

                    <tr>
                        <td><span style="color:red" id="info"></span></td>
                        <td colspan="2">
                            <button type="button" onclick="update()" class="btn btn-success btn-sm">审核通过</button>
                            <button type="button" onclick="update1()" class="btn btn-success btn-sm">不予通过</button>
                        </td>

                    </tr>
                </table>
            </div>

        </div>
    </div>
</div>

</body>
<%--时间插件--%>
<script src="${pageContext.request.contextPath}/My97DatePicker/laydate/laydate.js"></script>
<%--//执行一个laydate实例--%>
<script>
    laydate.render({
        elem: '#demoTest'
        ,type: 'datetime'
    });
    laydate.render({
        elem: '#demoTestTime2'
        ,type: 'datetime'
    });
</script>
<script>
    //默认页面是第一页
    var page = 1;
    var row = 5  ;
    var totalPage = 0;

    //上一页
    function pres() {
        page--;
        if (page < 1) {
            page = 1;
        }
        loadData();
    }

    //下一页
    function nexts() {
        page++;
        if (page > totalPage) {
            page = totalPage;
        }
        loadData();
    }
    //修改
    function update() {
        //获取时间
        var tId = $("#tId").val();
        var userId = $("#userId").val();

        console.log("当前的时间类型为"+tId);
        console.log("当前的tid为"+tId);
        //ajax请求
        $.ajax({
            url: "${pageContext.request.contextPath}/Reserve/updateViewStateAjax",
            type: "post",
            data: {"tId": tId, "userId": userId},
            contentType: "application/x-www-form-urlencoded",
            dataType: "json",
            success: function (data) {
                console.log(data);
                //alert(data.info);
                $("#info").text(data.info1);

                $("#one").modal("hide");
                //刷新
                loadData();
            }
        })

    }
    function update1() {
        //获取时间
        var tId = $("#tId").val();
        var userId = $("#userId").val();

        console.log("当前的时间类型为"+tId);
        console.log("当前的tid为"+tId);
        //ajax请求
        $.ajax({
            url: "${pageContext.request.contextPath}/Reserve/updateViewStateAjax1",
            type: "post",
            data: {"tId": tId, "userId": userId},
            contentType: "application/x-www-form-urlencoded",
            dataType: "json",
            success: function (data) {
                console.log(data);
                //alert(data.info);
                $("#info").text(data.info1);

                $("#one").modal("hide");
                //刷新
                loadData();
            }
        })

    }
    //加载数据
    function loadData() {
        //做模糊查询 获取输入框里面的值
        var userId = $("#userId1").val();
        var  userName = $("#userName").val();
        //获取用户数
        var userNumber = $("#userNumber").val();

        $.ajax({
            url: "${pageContext.request.contextPath}/user/showUsersAjax",
            type: "get",
            data: {"userId":userId,"userName":userName,"userNumber":userNumber,"page": page, "row": row},
            dataType: "json",
            success: function (data) {
                    console.log(data);
                    console.log(data.list.length)
                if (typeof (data.info) == 'string') {
                    //清空
                    $("#tb").html(data.info);
                } else {
                    //取出总页数
                    totalPage = data.totalPage;
                    //显示总条数
                    $("#total").text(data.total);
                    //显示总页数
                    $("#totalPage").text(totalPage);

                    var html = "";
                    for (var i = 0; i < data.list.length; i++) {
                        console.log("当前的颜色" + data.list[i].colName)
                        html += "<tr"+" "+data.list[i].colName+">" +
                            "<td ><input  type=\"checkbox\" name=\"selectId\" value='" + data.list[i].tId + "'></td>" +
                            "<td>" + data.list[i].userId + "</td>" +
                            "<td >" + data.list[i].userName + "</td>" +
                            "<td >" + data.list[i].reMark + "</td>" +
                            "<td>" + changeTime(data.list[i].loginTime) + "</td>" +
                            "<button type='button' class=\"btn btn-success btn-sm\" onclick='updatePageWindow(this)'>查看用户详情</button>" +
                            "</td>" +
                            "</tr>";
                    }

                    $("#tb").html(html);
                }
            }
        })
    }

    //转换时间函数
    function changeTime(time){
        var commonTime = "";
        if(time){
            var unixTimestamp = new Date(time*1) ;
            commonTime = unixTimestamp.toLocaleString();
        }
        return commonTime;
    }
    //重写方法
    Date.prototype.toLocaleString = function() {
        return this.getFullYear() + "年" + (this.getMonth() + 1) + "月" + this.getDate() + "日 " + this.getHours() + "点" + this.getMinutes() + "分" + this.getSeconds() + "秒";
    };

    //打开修改弹窗
    function updatePageWindow(obj) {
        //显示弹窗
        $("#one").modal("show");
        //清空提示信息
        $("#info").text("");

        var tId = $(obj).parent().parent().find("td").eq(1).text();
        $("#tId").val(tId);
        //id选择器
        var userId = $(obj).parent().parent().find("td").eq(2).text();
        $("#userId").val(userId);
        //id选择器

        var tTime = $(obj).parent().parent().find("td").eq(3).text();
        $("#tTime").val(tTime);

        var tArrtime = $(obj).parent().parent().find("td").eq(4).text();
        $("#tArrtime").val(tArrtime);

        var userNumber = $(obj).parent().parent().find("td").eq(5).text();
        $("#userNumber").val(userNumber);

    }

    function deletePage(obj) {
        var is = confirm("你确定删除吗");
        if (is) {
            var id = $(obj).parent().parent().find("td").eq(0).text();
            console.log(id);
            //ajax请求
            $.ajax({
                url: "${pageContext.request.contextPath}/admin/deleteAjax?sysId=" + id,
                type: "get",
                data: {"sysId": id},
                dataType: "json",
                success: function () {
                    console.log(id);
                    loadData();
                }
            })
        }
    }

    //排序
    function orderBy(obj, name) {
        console.log(name);
        var v = $(obj).find("span").text();

        colName = name;
        if (v == "👆") {
            $(obj).find("span").text("👇");
            order = "desc";
        } else {
            $(obj).find("span").text("↑↑");
            order = "asc";
        }
        loadData();
    }
    //全选
    function quanxuan(obj) {
        //1 获取全选的值
        //  var v = $(obj).prop("checked");
        // console.log(v);
        // $("input[name='selectId']").prop("checked",v);
        $("input[name='selectId']").prop("checked",$(obj).prop("checked"));
    }
</script>
</html>
